<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.duanci{
				width: 300px;
				height: 100px;
				background-color: #8AC007;
				margin: 30px auto;
				word-wrap: break-word;/*强制断句*/
				word-break: break-all;/*不再因为单词长而换行*/
			}
			
			
			
			
			.zhongwen{
				width: 150px;
				height: 60px;
				background-color: #8AC007;
			}
				
			.zhongwen li{
				overflow: hidden;/*超出隐藏*/
				white-space: nowrap;/*超出不让换行*/
				text-overflow: ellipsis;/*显示省略号*/
			}
		</style>
	</head>

	<body>
		<div class="duanci"><!--英文处理-->
			this is a long wordddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
		</div>
		
		
		<div class="zhongwen"><!--中文处理-->
			<li title="超长文本的处理方式，"><!--鼠标放上时显示内容-->
				超长文本的处理方式。
			</li>
		</div>
	</body>

</html>